<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <script src="https://unpkg.com/vue@next"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-plus"></script>
	
	<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
	<script src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script> 
	 <!-- 导入样式 -->
	<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
	<!-- 导入组件库 -->
	<script scr="//unpkg.com/element-plus"></script>
    <title>Element Plus demo</title>
	<style>
		.el-table{
			margin: 50px auto;
		}
		p{
			width: 80%;
			margin: 20px auto;
		}
	</style>
  </head>
  <body>
	<a href="http://localhost:8080/yuangong/findYuangong">aaa</a>
 
    <div id="app">
		<p style="display: flex;">
			<el-button style="flex:1;" @click="addYuangong">添加员工</el-button>
			<!--搜索功能-->
			<el-form style="flex: 8;text-align: right;" :inline="true"  class="demo-form-inline">
				<el-form-item label="员工姓名">
					<el-input  placeholder="请输入员工姓名" v-model="search.yname"/>
				</el-form-item>
				<el-form-item label="员工工资">
					<el-input-number v-model="search.beginSal"></el-input-number>
					&nbsp; - &nbsp;
					<el-input-number v-model="search.endSal"></el-input-number>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="searchFun()">搜索</el-button>
				</el-form-item>
			</el-form>
		</p>
       <el-table :data="subYuangong" style="width: 80%">
          <el-table-column prop="yid" label="id" width="180" ></el-table-column>
          <el-table-column prop="yname" label="姓名" width="180" ></el-table-column>
		  <el-table-column prop="word" label="工作" width="180" ></el-table-column>
		  <el-table-column prop="sal" label="工资" width="180" ></el-table-column>
          <el-table-column width="200" >
			  <template #default="scope">
				<el-button @click="edit(scope.row)">修改</el-button>
				
				<el-popconfirm title="确定要删除吗?" @confirm="delYuangong(scope.row.yid,scope.$index)">
				    <template #reference>
				      <el-button>删除</el-button>
				    </template>
				 </el-popconfirm>	
			  </template> 

		  </el-table-column>
        </el-table>
		<!--分页组件-->
		<p>
			<el-pagination  style="width: 100%;justify-content: center"  background layout="prev, pager, next" :total="yuangong.length" 
			:page-size="pageSize" @current-change="sizechange"/>
		</p>
		
		<!--添加对话框-->
		<el-dialog v-model="addDialogVisible" title="添加员工" width="40%">
			<!--添加表单-->
			<el-form
			    :label-position="labelPosition"
			    label-width="100px"
			    style="max-width: 460px"
			  >
			    <el-form-item label="员工姓名">
			      <el-input v-model="empa.yname"/>
			    </el-form-item>
			    <el-form-item label="工作">
			      <el-input v-model="empa.word"/>
			    </el-form-item>
			    <el-form-item label="工资">
			      <el-input-number v-model="empa.sal"/>
			    </el-form-item>
				<el-form-item label="id">
				  
				  <el-select v-model="empa.id" class="m-2" placeholder="Select">
						<el-option
						v-for="bumen in bumenlist"
						:key="bumen.value"
						:label="bumen.bname"
						:value="bumen.id"
						/>
				   </el-select> 

				</el-form-item>
				<el-form-item>
					<el-button @click="saveAdd()">确定</el-button>
					<el-button>取消</el-button>
				</el-form-item>
			  </el-form>
		</el-dialog>
      <!--修改对话框-->
		<el-dialog v-model="dialogVisible" title="修改员工" width="40%">
			<!--修改表单-->
			<el-form
			    :label-position="labelPosition"
			    label-width="100px"
			    style="max-width: 460px"
			  >
			    <el-form-item label="员工姓名">
			      <el-input v-model="e.yname"/>
			    </el-form-item>
			    <el-form-item label="工作">
			      <el-input v-model="e.word"/>
			    </el-form-item>
			    <el-form-item label="工资">
			      <el-input-number v-model="e.sal"/>
			    </el-form-item>
				<el-form-item>
					<el-button @click="saveEdit">确定</el-button>
					<el-button>取消</el-button>
				</el-form-item>
			  </el-form>
		</el-dialog>
    </div>
    <script>
	  
      const App = {
        data() {
          return {
			  addDialogVisible:false,
			  dialogVisible:false,
            message: "Hello Element Plus",
			search:{beginSal:0,endSal:0},//保存搜索信息
			yuangong:[],//数据库的全部数据
			subYuangong:[],//存储从yuangong中截取的分页数据
			e:{},//保存修改信息
			empa:{},//保存添加信息
			bumenlist:[],
			pageSize:3, //每页显示的数据数目
			pageIndex:1,//页码刚开始默认是第一页
          };
        },
		methods:{
			searchFun(){
				let str=Qs.stringify(this.search)
				let that=this
				axios.get("http://localhost:8080/yuangong/search?"+str).
				then(function(res){
					console.log(res)
					that.subYuangong=res.data
				})
			},
			sizechange(v){
				this.pageIndex=v  //当选择某个页码后更新当前页的索引
				
				//this.pageIndex=3
				//从yuangong所有员工数据中，截取某一页的数据
				let star=this.pageIndex*this.pageSize-this.pageSize
				let end=this.pageIndex*this.pageSize
				this.subYuangong=this.yuangong.slice(star,end)
			},
			saveAdd(){
				
				let that=this
				let str=Qs.stringify(this.empa)
				console.log(this.empa)
				
				//将存了员工所有信息的empa对象 通过后端保存到数据库中
				axios.get("http://localhost:8080/yuangong/add?"+str).
				then(function(res){
					if(res.data){
						that.$message.success("添加成功")
						//隐藏表格
						that.addDialogVisible=false
						//el-table响应成添加数据后
						//1重新调用数据库查询 将结果重新渲染到el-table上 不推荐
						//2.直接在前端将添加的数据对象empa保存到el-table标签关联的数据集合emps中
						//that.subYuangong.push(that.empa)//push()数据库追加新元素						
						//that.yuangong.unshift(that.empa)
						
						//注意：添加成功之后 将数据中的最新结果更新到yuangong中
						axios.get("http://localhost:8080/yuangong/findYuangong").
						then(function(res){
										 
							 that.yuangong=res.data//that.yuangong存储的是全部数据
							that.sizechange(1) //重新截取一下第一页的数据
							//that.sizechange(that.pageIndex)//删除后重新分页
						})
						
					}else{
						that.$message.success("添加失败")
					}
					
				})
				
			},
			addYuangong(){
				let that=this
				this.addDialogVisible=true
				//调用后端查询
				axios.get("http://localhost:8080/bumen/list").
				then(function(res){
					console.log(res.data)
					that.bumenlist=res.data
				})
			},
			delYuangong(yid,index){
				let that=this
				axios.get("http://localhost:8080/yuangong/del?yid="+yid).
				then(function(res){
					if(res.data){
						alert("删除成功")
						//删除成功后页面信息更新有两种实现方法
						//1.重新执行数据库查询 参考created中的代码 
						//2.直接删除yuangong数组中的对应信息，el-table标签会重新渲染数据显示数据
						//that.yuangong.splice(index,1)
						
						//先从yuangong中找到要删除的元素的索引 然后执行yuangong的删除
						//注意：删除数据库数据后，将yuangong和数据库内容进行更新对接
						
						axios.get("http://localhost:8080/yuangong/findYuangong").
						then(function(res){
										 
							 that.yuangong=res.data//that.yuangong存储的是全部数据
							
							that.sizechange(that.pageIndex)//删除后重新分页
						})
						//that.subYuangong.splice(index,1) //执行数组删除 splice(删除的索引，删除元素个数)
						
					}else{
						alert("删除失败")
					}
				})
			},
			saveEdit(){
				this.dialogVisible=false
				//将修改的内容体现到数据库中
				//将json对象转成http协议可以传递的string类型
				let estr=Qs.stringify(this.e)
				axios.get("http://localhost:8080/yuangong/edit?"+estr).
				then(function(res){
					if(res.data){
						that.$message.success("添加成功") 
					}else{
						that.$message.error("操作失败") 
					}
				})
				
			},
			edit(row){
				this.e=row
				console.log(row)
				this.dialogVisible=true
			}
		},
		 created(){
			 console.log(1111)
			 let that=this
			 axios.get("http://localhost:8080/yuangong/findYuangong").
			 then(function(res){
				 
				 that.yuangong=res.data//that.yuangong存储的是全部数据
				 //slice()窗口刚加载时截取第一页数据,包含star到end（不包括该元素）
				 that.subYuangong=that.yuangong.slice(0,that.pageSize)
			 })
			 
		 }
      };
      const app = Vue.createApp(App);
      app.use(ElementPlus);
      app.mount("#app");
    </script>
  </body>
</html>